<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Example</title>
    <script
      type="text/javascript"
      src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
    ></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
    <script type="text/javascript" src="/dist/tn-element-ui.js"></script>
    <style>
      .stretch-wrapper-demo {
        position: fixed;
        z-index: 1;
        transform: translateX(400px) translateY(300px);
        color: #fff;
      }
      .stretch-wrapper-demo .tn-stretch-wrapper {
        border: 2px solid #ccc;
        background: #333;
      }
    </style>
  </head>

  <body class="tn-background-normal">
    <div id="app" class="tn-absolute-fit tn-flex-box" direction="column">
      <h2>StretchWrapper</h2>
      <hr />
      <tn-v-box size="1" content-spacing>
        <div>switchPostion(默认居右): {{ switchPostion || String(switchPostion) }}</div>
        <div>
          <el-radio-group v-model="switchPostion">
            <el-radio
              v-for="item in ['left', 'right', 'top', 'bottom']"
              :key="item"
              :label="item">{{ item }}</el-radio>
          </el-radio-group>
        </div>
        <div>
          $slots['arrow-right-icon']:
          <el-switch
            v-model="hasArrowRightIconSlot"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
        <div
          size="1"
          class="tn-flex-box"
          justify-content='center'
          align-items='center'
          v-bind:style="contentStyle"
          @click="clickHandler">
          click me
        </div>
      </tn-v-box>
      
      <tn-stretch-wrapper
        class="stretch-wrapper-demo"
        :switch-postion="switchPostion"
        :switch-expanded-style="switchExpandedStyle"
      >
        <div style="width: 300px; height: 300px; margin: 10px; border: 2px solid #ccc;">content</div>
        <i v-if="hasArrowRightIconSlot" slot="arrow-right-icon" class="el-icon-caret-right"></i>
      </tn-stretch-wrapper>
    </div>

    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          switchPostion: undefined,
          switchExpandedStyle: {
            color: 'red'
          },
          contentStyle: {
            backgroundColor: '#ccc',
            fontSize: '100px'
          },
          hasArrowRightIconSlot: true
        },
        methods: {
          clickHandler () {
            this.contentStyle.backgroundColor = `#${Math.random().toString(16).substr(2, 6).toUpperCase()}`
          }
        }
      })
    </script>
  </body>
</html>
